<template>
  <app-dialog style="top: 3vh;" v-model="show" width="1000px" title="订单截图" @open="handleOpen">
    <div class="order_img">
      <div class="order_img_body">
        <img v-if="image && htmlContent != ''" :src="image" style="width: 100%; height: 200px" />
        <div v-else class="empty">
          <div>暂无图片</div>
        </div>
      </div>
      <div class="order_img_text">最新抓取时间：{{protodata.adddate ? protodata.adddate : '--'}}</div>
    </div>

    <template #footer>
      <el-button type="primary" @click="updateimg">更新</el-button>
    </template>
  </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
import html2canvas from 'html2canvas'

const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const getlistData = inject('getlistData')
const props = defineProps({
  data: Object,
})

const htmlContent = ref('')
const protodata = ref({})
const orderId = ref('')
const image = ref(null)

const handleClose = () => {
  show.value = false
}
const handleOpen = () => {
  console.log(props.data);
  
  htmlContent.value = ''
  protodata.value = {}
  orderId.value = props.data.id
  getimgHtml()
}

const updateimg = () => {
  htmlContent.value = ''
  protodata.value = {}
  getimgHtml()
}
const capture = async () => {
  const container = document.createElement('div')
  container.innerHTML = htmlContent.value
  document.body.appendChild(container)
  container.offsetHeight; 
  container.style.width = '920px';
  await new Promise(resolve => requestAnimationFrame(resolve));
  const canvas = await html2canvas(container)
  const dataURL = canvas.toDataURL('image/png')
  image.value = dataURL
  document.body.removeChild(container)
}

const getimgHtml = () => {
  http({
    method: 'get',
    url: `/order/order_photo?order_id=${orderId.value}`,
  }).then(res => {
    if (res.code == 200) {
      htmlContent.value = res.data.html
      protodata.value = res.data.proto_data
      capture()
    }
  })
}
</script>

<style lang="scss" scoped>
.order_img {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
}
.order_img_body {
  width: 920px;
  // height: 534px;
  height: 200px;
  // background-color: #ebebeb;
}
.order_img_text {
  margin: 28px 0;
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #252a30;
}

.empty{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  height: 100%;
}
</style>